{% extends 'base.html' %}
{% block title %}Articles with Tag:{{tag_name}} {% endblock %}
{% block content %}

<main class="container mx-auto px-4 py-8">
    <div class="text-center">
        <p class="text-xl p-6">This is a minimalistic personal website built with Flask and Tailwind CSS with {{article_count}} post.</p>
    </div>

    <!-- Form for adding new articles -->
    <!-- <form action="/add_article" method="POST" class="mb-8"> -->
        <!-- <input type="text" name="title" placeholder="Article Title" required class="block mb-2 p-2 w-full border border-gray-300 rounded-lg"> -->
        <!-- <textarea name="content" placeholder="Article Content" required class="block mb-2 p-2 w-full border border-gray-300 rounded-lg"></textarea> -->
        <!-- <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">Submit</button> -->
    <!-- </form> -->




    <!-- Article Start -->
    {% if tag_name %}
    	<h1>Articles with Tag "{{tag_name}}"</h1>
    <ul>
        {% for article in articles %}
            <!-- <li> -->
                <!-- <a href="{{ url_for('main.article_detail', article_id=article.id) }}">{{ article.title }}</a> -->
            <!-- </li> -->
        {% else %}
            <li >No articles found with this tag.</li>
        {% endfor %}
    </ul>
    {% else %}
    {% endif %}

    {% if tags %}
        <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main2" style="width: 100%;height:100vh;" class="mx-auto"></div>
        <script>
            var chart = echarts.init(document.getElementById('main2'));

            var option = {
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                    width: 600,
                    height: 400,
                    drawOutOfBound: true,
                    textStyle: {
                        color: function () {
                            return 'rgb(' + [
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160),
                                Math.round(Math.random() * 160)
                            ].join(',') + ')';
                        }
                    },
                    emphasis: {
                        textStyle: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        }
                    },
                    data: {{converted_list|tojson}}
                    
                } ]
            };

            chart.setOption(option);

            window.onresize = chart.resize;

        chart.on('click', function (params) {
            var data = params.data; // 获取点击的词的数据
            if (data && data.link) {
                window.open(data.link); // 打开链接
            }
        });

        </script>  
    <!-- <ul class="title-list"> -->
        <!-- {% for tag in tags %} -->
            <!-- <li>{{ tag }}</li> -->
        <!-- {% else %} -->
            <!-- <li>没有找到标签。</li> -->
        <!-- {% endfor %} -->
    <!-- </ul> -->
    {% else %}
    {% endif %}

    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        {% for article in articles|sort(attribute='updated_at', reverse=True) %}
        <div class="border-solid border-2 border-black dark:border-white p-6 rounded-lg shadow-md hover:shadow-xl hover:scale-105 transition-all duration-300 ease-in-out">
            <h2 class="text-lg font-semibold mb-2">
                <a href="{{ url_for('main.article_detail', article_id=article.id) }}" class="text-black dark:text-white hover:text-red-500">{{ article.title }}</a>
            </h2>
            <div class="flex items-center text-gray-500 dark:text-slate-400 mb-2 space-x-4">
                <time datetime="{{ article.updated_at }}" title="Updated At" class="flex items-center">
                    <i class="fas fa-calendar-alt mr-1"></i> {{ article.updated_at.strftime('%y-%m-%d %H:%M')}}
                </time>
                <!-- Add category -->
                <div class="flex items-center">
                    <i class="fas fa-folder mr-1"></i> {{ article.category }}
                </div>
                <!-- Add view count -->
                <div class="flex items-center">
                    <i class="fas fa-eye mr-1"></i> {{ article.view_count }}
                </div>
            </div>
            <p class="text-lg mb-2 line-clamp-4">{{ article.content}}</p>
            <a href="{{ url_for('main.article_detail', article_id=article.id) }}" class="bg-red-500 text-black px-4 py-2 rounded mt-4 inline-block hover:bg-red-700 ">Read More</a>
        </div>
        {% endfor %}

    </div>

</main>

{% endblock %}